const TerserPlguin = require("terser-webpack-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { PurgeCSSPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const path = require("path");
const webpack = require("webpack");

module.exports = {
  // mode: "production",
  mode: "development",
  devtool: false,
  optimization: {
    usedExports: true, // 在导入模块时，分析哪些模块可以使用(production自动开启)
    chunkIds: "deterministic",
    splitChunks: {
      chunks: "all",
    },
    minimize: true, // 告之webpack 使用terser
    minimizer: [
      // js 压缩配置
      new TerserPlguin({
        extractComments: true, // 是否提取注释
        parallel: true, // 使用多进程并发提高构建
        terserOptions: {
          compress: {
            // 设置压缩相关配置
            arguments: true,
            unsafe: true,
          },
          mangle: true, // 是否丑化
          // toplevel: false, // 顶层变量是否转换
          keep_fnames: true, // 是否保留函数名称
        },
      }),
      // css 压缩配置
      new CssMinimizerWebpackPlugin({
        parallel: true,
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name]_[hash:6].css",
      chunkFilename: "css/[name]_[hash:6].css",
    }),
    // css tree shaking
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "./src")}/**/*`, {
        nodir: true, // 不查找文件夹
      }),
      safelist: function () {
        return {
          standard: ["body"],
        };
      },
    }),
    // 作用域提升
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
};
